<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas</title>
    <style>
        #myCanvas {
            background-color: #abcdef;
        }
    </style>
</head>
<body>
<canvas id="myCanvas">
    您的浏览器不支持Canvas，请升级浏览器
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.canvas.width = 600;
    ctx.canvas.height = 400;
    var img = new Image();
    img.src = "logo.png";
    //一定要在图像加载完成之后的回调中绘制图像
    img.onload = function () {
//        在（0，0）点处绘制img图像；
//        ctx.drawImage(img,0,0)
//        在（0，0）点处绘制img图像，缩放成256x80
//        ctx.drawImage(img, 0, 0, 256, 80);
//        获取img图像的（0，0）点处的40x40区域，绘制在（100，100）点处，缩放成80x80
        ctx.drawImage(img, 0, 0, 40, 40, 100, 100, 80, 80);
    }
</script>
</body>
</html>